<template>
  <div>Home</div>
  <span>store中的count : {{ $store.state.count }}</span>
  <br />
  <span>store中的Sname : {{ Sname }}</span>
  <br />
  <span>store中的name111 : {{name}}</span>
  <br />
  <!-- <span>store中的age : {{ age() }}</span> -->
</template>

<script>
import { computed } from 'vue'
import { useStore, mapState } from 'vuex'
export default {
  setup() {
    const store = useStore()
    const Sname = computed(() => store.state.name)
    const storeStateFns = mapState(['name', 'age'])
    const storeState = {}
    Object.keys(storeStateFns).forEach(key => {
      storeState[key] = computed(storeStateFns[key].bind({$store: store}))
    })
    console.log(storeState)
    return {
      Sname,
      // ...mapState(['age']),
      ...storeState
    }
  },
}
</script>

<style lang="scss" scoped></style>
